<template>
  <div class="wareHouseBox">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.stoName" placeholder="请输入仓库名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-circle-plus-outline" v-hasPermi="['index:libraryIndex:add']"
          @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-search" v-hasPermi="['index:libraryIndex:query']"
          @click="getDataList">查询</el-button>
        <el-button type="danger" icon="el-icon-refresh" @click="cancelValidateForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="wareList" border height="605px">
      <el-table-column type="index" label="序号" align="center"> </el-table-column>
      <el-table-column prop="stoName" label="仓库名称" align="center"></el-table-column>
      <el-table-column prop="stoCode" label="仓库编号" width="180" align="center"></el-table-column>
      <el-table-column prop="enableState" label="仓库状态" width="180" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.enableState" active-color="#13ce66" inactive-color="#ff4949" :active-value="'1'"
            v-hasPermi="['index:region:stateEdit']" :inactive-value="'0'" @change="toggleState(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['index:region:edit']"
            @click="add('edit', scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" v-hasPermi="['index:region:delete']"
            @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
      :page-sizes="[20, 50,100]" :total="total" @current-change="handleCurrentChange" :current-page="formInline.pageNum" :page-size="formInline.pageSize">
    </el-pagination>
    <addWareHouse ref="addWareHouseRef" :visible.sync="visible" @addSuccess="addSuccess"></addWareHouse>
  </div>
</template>

<script>
  import {
    updateEnableStatus,//更新状态
    deleteWarehouse,//删除
    allList ,//获取数据
  } from "@/api/index/yxl.js";
  import addWareHouse from './wareNew/index.vue'
  export default {
    data() {
      return {
        wareList: [],
        visible: false,
        formInline: {
          pageSize: 20,
          pageNum:1
        },
        total: 0,
      }
    },
    components: {
      addWareHouse
    },
    created() {
      this.getDataList();//获取仓库列表
    },
    methods: {
      //删除数据
      deleteBtn(row){
        // 弹出确认框
        this.$confirm(`确认要删除此项任务吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWarehouse(row.stoId).then(res=>{
            this.$message.success(res.msg);
            this.getDataList();
          })
        })
      },
      // 任务状态修改
      toggleState(row) {
        // 根据 enablestate 判断是启用还是停用
        let text = row.enableState === "1" ? "停用" : "启用";
        let query = {
          status: row.enableState === "1" ? "0" : "1", // 状态切换：如果是 "0"（禁用），则切换为 "1"（启用）；反之亦然
          stoId: row.stoId
        };
        // 弹出确认框
        this.$confirm(`确认要${text}此项任务吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 更新状态
          updateEnableStatus(query).then(res => {
            // 显示成功消息
            this.$message({
              type: 'success',
              message: `${text}成功!` // 根据操作状态来动态显示消息
            });
            // 更新列表或者执行其他操作（例如刷新数据等）
            this.getDataList(); // 这里假设有一个方法用于刷新列表数据
          }).catch(error => {
            // 错误处理
            this.$message({
              type: 'error',
              message: `操作失败: ${error.message || '未知错误'}` // 显示错误消息
            });
          });
        }).catch(() => {
          // 用户取消了操作
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      //查询列表
      getDataList() {
        allList(this.formInline).then(res => {
          this.wareList = res.rows;
          this.total = res.total;
        })
      },
      // 新增成功后，刷新列表
      addSuccess() {
        this.getDataList();
      },
      //新增数据
      add(type, item) {
        this.visible = true;
        this.$refs.addWareHouseRef.openDialog(type, item);
      },
      cancelValidateForm() {
        this.formInline.stoName = "";
        this.formInline.stoId = '';
        this.getDataList();
      },
      handleSizeChange(newsize) {
        this.formInline.pageNum = 1
        this.formInline.pageSize = newsize
        this.getDataList()
      },
      handleCurrentChange(newpage) {
        this.formInline.pageNum = newpage
        this.getDataList()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .wareHouseBox {
    padding: 15px 0px 15px 15px;
  }

  .el-pagination {
    float: right;
    margin: 20px;
  }
</style>
